<?php
require_once __DIR__ . '/admin/functions.php';

// Enable error reporting for debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Get slug from URL
$slug = isset($_GET['slug']) ? $_GET['slug'] : '';

// Debug info (comment out in production)
// echo "Requested slug: " . htmlspecialchars($slug) . "<br>";

// Get article by slug
$article = getArticleBySlug($slug);

// If no slug or article not found, try ID (for backwards compatibility)
if (!$article && isset($_GET['id'])) {
    $articleId = (int)$_GET['id'];
    $article = getArticle($articleId);
    if ($article && isset($article['slug'])) {
        header('Location: /artikel/' . urlencode($article['slug']));
        exit;
    }
}

// If no article found, redirect to news page
if (!$article) {
    header('Location: /berita-terbaru');
    exit;
}

// Set page variables for header
$pageTitle = htmlspecialchars($article['title']) . ' - Darurat Mafia Tanah';
$pageDescription = 'Investigasi mendalam: ' . strip_tags(substr($article['content'], 0, 150)) . '...';
$pageImage = isset($article['image']) ? 'http://' . $_SERVER['HTTP_HOST'] . '/articles/' . $article['image'] : 'http://' . $_SERVER['HTTP_HOST'] . '/images/hero-bg.jpeg';
$showAdminLink = false; // Hide admin link on public pages

// Get related articles (4 articles excluding current one)
$relatedArticles = getRelatedArticles($article['id'], 4);

// Article page CSS with related articles styling
$extraCSS = '
<style>
    .related-articles {
        margin-top: 3rem;
        padding: 2rem 0;
        border-top: 2px solid #e1e8ed;
    }
    
    .related-header {
        color: #2c3e50;
        font-family: "Oswald", sans-serif;
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    .related-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .related-item {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid #f0f0f0;
    }
    
    .related-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }
    
    .related-image {
        width: 100%;
        height: 160px;
        object-fit: cover;
        display: block;
    }
    
    .related-content {
        padding: 1rem;
    }
    
    .related-meta {
        color: #666;
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .related-badge {
        background: #3498db;
        color: white;
        padding: 0.2rem 0.5rem;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    .related-badge.featured {
        background: #e74c3c;
    }
    
    .related-title {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }
    
    .related-title a {
        color: #2c3e50;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    .related-title a:hover {
        color: #c0392b;
    }
    
    .related-excerpt {
        color: #666;
        font-size: 0.9rem;
        line-height: 1.4;
        margin-bottom: 0.8rem;
    }
    
    .related-date {
        color: #999;
        font-size: 0.8rem;
    }
    
    @media (max-width: 1200px) {
        .related-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (max-width: 768px) {
        .related-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
        }
        
        .related-articles {
            margin-top: 2rem;
            padding: 1.5rem 0;
        }
        
        .related-header {
            font-size: 1.3rem;
        }
        
        .related-image {
            height: 140px;
        }
        
        .related-content {
            padding: 0.8rem;
        }
    }
</style>
';

// Debug info (comment out in production)
// echo "<pre>";
// var_dump($article);
// echo "</pre>";

// Include header
include 'includes/header.php';
?>

    <main>
        <div class="container main-content">
            <div class="article-container">
                <a href="/berita-terbaru" class="back-link">« Kembali ke Berita Terbaru</a>
                
                <article>
                    <div class="article-header">
                        <h1><?php echo htmlspecialchars($article['title']); ?></h1>
                        <div class="article-meta">
                            Dipublikasikan: <?php echo date('d F Y', strtotime($article['date'])); ?>
                        </div>
                    </div>

                    <?php if (!empty($article['image'])): ?>
                    <img src="/articles/<?php echo htmlspecialchars($article['image']); ?>" 
                         alt="<?php echo htmlspecialchars($article['title']); ?>"
                         class="article-image lazy-image"
                         loading="lazy"
                         decoding="async">
                    <?php endif; ?>

                    <div class="article-content">
                        <?php echo $article['content']; ?>
                    </div>
                </article>

                <!-- Related Articles Section -->
                <?php if (!empty($relatedArticles)): ?>
                <section class="related-articles">
                    <h2 class="related-header">Rekomendasi Berita :</h2>
                    <div class="related-grid">
                        <?php foreach ($relatedArticles as $relatedArticle): ?>
                            <article class="related-item">
                                <?php if (!empty($relatedArticle['image'])): ?>
                                    <img src="/articles/<?php echo htmlspecialchars($relatedArticle['image']); ?>" 
                                         alt="<?php echo htmlspecialchars($relatedArticle['title']); ?>"
                                         class="related-image lazy-image"
                                         loading="lazy"
                                         decoding="async">
                                <?php else: ?>
                                    <img src="https://via.placeholder.com/300x160/34495e/ffffff?text=Berita" 
                                         alt="<?php echo htmlspecialchars($relatedArticle['title']); ?>"
                                         class="related-image lazy-image"
                                         loading="lazy"
                                         decoding="async">
                                <?php endif; ?>
                                
                                <div class="related-content">
                                    <div class="related-meta">
                                        <?php if (isset($relatedArticle['featured']) && $relatedArticle['featured']): ?>
                                            <span class="related-badge featured">Featured</span>
                                        <?php else: ?>
                                            <span class="related-badge">Berita</span>
                                        <?php endif; ?>
                                        <span class="related-date"><?php echo date('d M Y', strtotime($relatedArticle['date'])); ?></span>
                                    </div>
                                    
                                    <h3 class="related-title">
                                        <a href="/artikel/<?php echo urlencode($relatedArticle['slug']); ?>">
                                            <?php echo htmlspecialchars($relatedArticle['title']); ?>
                                        </a>
                                    </h3>
                                    
                                    <p class="related-excerpt">
                                        <?php 
                                        $excerpt = strip_tags($relatedArticle['content']);
                                        echo strlen($excerpt) > 100 ? substr($excerpt, 0, 100) . '...' : $excerpt;
                                        ?>
                                    </p>
                                </div>
                            </article>
                        <?php endforeach; ?>
                    </div>
                </section>
                <?php endif; ?>
            </div>
        </div>
    </main>

<?php
// Include footer
include 'includes/footer.php';
?> 